<!-- 其他的接口 返回的是返回频繁项集和关联规则-->
<template>
    <div class="body">
        <div class="header">
            <el-form
                ref="form"
                :rules="formRules"
                :model="formModel"
                label-width="80px"
            >
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="support:" prop="support">
                            <el-input
                                v-model="formModel.support"
                                placeholder="请输入参数support"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="confidence:" prop="confidence">
                            <el-input
                                v-model="formModel.confidence"
                                placeholder="请输入参数confidence"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit"
                                >获取数据</el-button
                            >
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="body_1">
            <el-table :data="itemsets" style="width: 40%">
                <el-table-column prop="id" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="item" label="频繁项集" width="180">
                </el-table-column>
            </el-table>
        </div>
        <div class="body_2">
            <el-table :data="rules" style="width: 60%">
                <el-table-column prop="id" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="rule" label="关联规则" width="180">
                </el-table-column>
                <el-table-column prop="support" label="置信度" width="180">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import JsonViewer from "vue-json-viewer";
export default {
    name: "Exp2OtherData",
    components: {
        JsonViewer,
    },
    data() {
        //验证这个数据是否在0到1之间
        const validNum = (rule, value, callback) => {
            if (value > 1 || value < 0) {
                callback(new Error("数字范围是0~1"));
            } else {
                callback();
            }
        };

        return {
            formModel: {
                support: 0.4,
                confidence: 0.6,
            },
            formRules: {
                support: [
                    {
                        validator: validNum,
                        trigger: "blur",
                    },
                ],
                confidence: [
                    {
                        validator: validNum,
                        trigger: "blur",
                    },
                    ,
                ],
            },
            itemsets: [],
            rules: [],
        };
    },
    async created() {
        let { data } = await this.$http.get("/one/apriori/ans");
        let items = data.itemsets;
        let rule = data.rules;
        this.itemsets = Object.keys(items).map((item, index) => {
            return {
                id: index,
                item: items[index].join(","),
            };
        });
        this.rules = rule.map((item, index) => {
            return {
                id: index,
                rule: item[0],
                support: item[1],
            };
        });
    },
    methods: {
        onSubmit() {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    //验证成功
                    let { data } = await this.$http.get(
                        "/one/apriori/ans?support=" +
                            this.formModel.support +
                            "&confidence=" +
                            this.formModel.confidence
                    );
                    let items = data.itemsets;
                    let rule = data.rules;
                    this.itemsets = Object.keys(items).map((item, index) => {
                        return {
                            id: index,
                            item: items[index].join(","),
                        };
                    });
                    this.rules = rule.map((item, index) => {
                        return {
                            id: index,
                            rule: item[0],
                            support: item[1],
                        };
                    });
                }
            });
        },
    },
};
</script>

<style  scoped>
.body {
    overflow: hidden;
    height: 65%;
}
</style>
